<template>
  <div>
    <header class="header-box">
      <p class="title-text">知识图谱工具</p>
    </header>
    <div class="main-box">
      <div class="tool-bar-box">
      </div>
      <div class="content-box">
        <div class="side">
          <div class="side-content">
            <div class="side-bar-box">
              <div v-for="(item, index) in sideBarTools" @click="iconClickhandler(index)">
                <svg-icon :key="index" v-if="activeIndex === index" :icon-class="item.activeIcon" ></svg-icon>
                <svg-icon v-else :icon-class="item.icon" :key="index"></svg-icon>
              </div>
            </div>
            <div class="side-bar-content">
              <Database v-if="activeIndex === 0" />
              <Favorite v-else />
            </div>
          </div>
        </div>
        <div class="center">
          <div class="center-content">
            <div class="oper-box">
              <el-form class="search-form">
                <el-form-item>
                  <el-input placeholder="请输入内容" style="width: 500px" v-model="searchParams" class="input-with-select">
                    <el-select style="width: 100px" v-model="select" slot="prepend" placeholder="请选择">
                      <el-option label="节点" value="1"></el-option>
                      <el-option label="关系" value="2"></el-option>
                    </el-select>
                    <el-button slot="append" type="primary" icon="el-icon-search" @click="submitHandler">搜索</el-button>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <GraphPanel ref="graphPanel" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import GraphPanel from "@/components/GraphPanel";
import Database from "@/components/Database";
import Favorite from "@/components/Favorite";
export default {
  name: 'HomeView',
  components: {Favorite, Database, GraphPanel},
  data() {
    return {
      searchParams: "",
      select: "",
      activeIndex: 0,
      sideBarTools: [
        {
          name: "database",
          text: "数据库",
          icon: "database",
          activeIcon: "database-active"
        },
        {
          name: "favorite",
          text: "收藏",
          icon: "fivestar",
          activeIcon: "fivestar-active"
        }
      ],
    }
  },

  methods: {
    submitHandler() {
      this.$refs.graphPanel.redraw();
    },
    iconClickhandler(index) {
      this.activeIndex = index;
    }
  },
  mounted() {
  },
  computed: {
    showIcon() {
      return this.activeIndex === this.curIndex
    }
  }
}
</script>

<style scoped>

.header-box {
  width: 100%;
  height: 49px;
  background: #528ff2;
  line-height: 49px;
}

.title-text {
  color: white;
  font-family: "Adobe 黑体 Std R",cursive;
  font-size: 30px;
  margin-left: 30px;
}

.main-box {
  height: calc(100vh - 49px);
  background-color: #efeded;;
  z-index: 1;
}

.tool-bar-box {
  width: 100%;
  height: 36px;
  background-color: #ffffff;
}

.content-box {
  display: flex;
  height: calc(100vh - 85px);

}

.side {
  width: 25%;
  padding: 8px 2px 0 0;
}

.center {
  width: 75%;
  padding: 8px 0 0 6px;
}

.side-content {
  box-sizing: border-box;
  background-color: #ffffff;
  height: 100%;
  border-top-right-radius: 3px;
  display: flex;
}

.side-bar-box {
  width: 60px;
  height: 100%;
  border-right: 1px solid #efeded;
}

.side-bar-box div {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #efeded;
}

.active {
  border: 2px solid yellow;
}

.center-content {
  box-sizing: border-box;
  background-color: #ffffff;
  height: 100%;
  border-top-left-radius: 3px;
}

.oper-box {
  height: 60px;
  border-bottom: 1px solid #efeded;
  box-sizing: border-box;
  line-height: 60px;
  display: flex;
}

.search-form {
  display: flex;
  padding-top: 10px;
  margin-left: 20px;
}

</style>
